<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('地址')}}</view>
			<view class="back"></view>
			<!-- <view class="rule">规则</view> -->
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="address_list">
				<view class="title">{{Lang.lang('聯繫人')}}</view>
				<input type="text" v-model="consigner" :placeholder="Lang.lang('請輸入聯繫人')" />
			</view>

			<view class="address_list">
				<view class="title">{{Lang.lang('手機號')}}</view>
				<input type="text" v-model="phone" :placeholder="Lang.lang('請輸入手機號')" />
			</view>

			<!-- <view class="address_list">
				<view class="title">所在地区</view>
				<input type="text" v-model="city" placeholder="点击选择地址" />
				<view class="icon_box" @tap="goChooseLocation">
					<view class="i iconfont icon-dizhi1"></view>
					<view class="t">定位</view>
				</view>
			</view> -->

			<view class="address_list">
				<view class="title">{{Lang.lang('詳細地址')}}</view>
				<input type="text" v-model="detail" :placeholder="Lang.lang('請輸入詳細地址')" />
			</view>


			<button class="confirm" @click="userAddressAdd()">{{Lang.lang('保存地址')}}</button>

			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
				themeColor="#333"></simple-address>
		</view>



	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				lang: 'en',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',

				consigner: '',
				phone: '',
				city: '',
				detail: ''
			}
		},
		components: {
			simpleAddress,
		},
		onLoad() {

		},
		onShow() {
			let that = this;
			//that.loadData();
		},
		methods: {
			goChooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.detail = res.address;
						that.city = res.name;
					}
				});
			},
			loadData() {
				let that = this;
				that.Net._get('home', {
					consigner: that.consigner,
					phone: that.phone,
					city: that.city,
					detail: that.detail
				}, res => {
					if (res.code == 200) {
						that.Msg.Success(res.msg)
						setTimeout(function() {
							that.backPage()
						}, 500);
					}
				});
			},
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1]
				this.$refs.simpleAddress.open();
			},
			userAddressAdd() {
				let that = this;
				that.Net._post('api/shop/userAddressAdd', {
					consigner: that.consigner,
					phone: that.phone,
					city: that.city,
					detail: that.detail
				}, res => {
					if (res.code == 200) {
						that.Msg.Success(res.msg)
						setTimeout(function() {
							that.backPage()
						}, 500);
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e.label);
				this.city = e.label
				console.log(e);
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.address_list {
		width: 100%;
		margin: 4% auto 0;
		display: flex;
		background-color: #1A1A1A;
		padding: 5vw 4vw;
		border-radius: 4vw;
	}




	.address_list .title {
		text-align: left;
		color: #fff;
		height: 7vw;
		line-height: 7vw;
		font-size: 4vw;
		font-weight: bold;
		margin-right: 3vw;
	}

	.address_list input {
		flex: 1;
		text-align: left;
		color: #fff;
		height: 7vw;
		line-height: 7vw;
		font-size: 4vw;
	}

	.address_list textarea {
		flex: 1;
		text-align: left;
		color: #fff;
		height: 30vw;
		line-height: 7vw;
		font-size: 4vw;
		background-color: #f5f5f5;
		border-radius: 1vw;
		padding: 1vw;
	}

	.address_list .icon_box {
		display: flex;
		align-items: center;
	}

	.address_list .icon_box .i {
		font-size: 4.5vw;
		color: #0155FF;
	}

	.address_list .icon_box .t {
		font-size: 3.8vw;
		color: #0155FF;
		margin-left: 1vw;
	}

	.address_list .switch_box {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
</style>